<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .girl{
            position: absolute;
            right:0;
            top:50%;
            transform:translateY(-50%);/*往上平移自身高度的一半*/

            width:180px;/*1260/7*/
            height:300px;
            background-image: url("/static/w2/day3/images/girl.png");

            /*步长为7，会根据终点自动平分*/
            animation:run 1s steps(7) 1s infinite,move 10s linear infinite ;

        }

        /**/
        @keyframes run{
            from{
                background-position-x: 0;
            }
            to{
                background-position-x:-1260px;
            }
        }
        /*往左移动*/
        @keyframes move{
            from{
                right:0;
            }
            to{
                right:100%;
            }
        }
    </style>
</head>
<body>
<div class="girl"></div>

</body>
</html>